<template>
    <div class="system-offer-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover" class="layout-padding-auto">
                <el-table size="default" :data="state.dataList" style="width: 100%" border="" stripe>
                    <el-table-column label="币种Id">
                        <template #default="scope">
                            <span>{{ scope.row.coinId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="币种名称">
                        <template #default="scope">
                            <span>{{ scope.row.coinName }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="币种图片" width="130">
                        <template #default="scope">
                            <!-- coinImage -->
                            <el-image style="width: 80px;" :src="scope.row.coinImage" :preview-teleported="true"
                                :preview-src-list="[scope.row.coinImage]">
                            </el-image>
                        </template>
                    </el-table-column>


                    <el-table-column align="center" label="币种符号">
                        <template #default="scope">
                            <span>{{ scope.row.coinSymbol }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="币种精度">
                        <template #default="scope">
                            <span>{{ scope.row.coinDecimals }}</span>
                        </template>
                    </el-table-column>


                    <el-table-column align="center" label="合约地址" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.tokenContract || "--" }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="充值地址" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.payContract || "--" }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="提现总量(天)" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.withdrawPerDayLimit || 0 }}</span>
                        </template>
                    </el-table-column>

                    

                    <el-table-column align="center" label="最小提现">
                        <template #default="scope">
                            <span>{{ scope.row.withdrawMinAmount || 0 }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="审核阈值">
                        <template #default="scope">
                            <span>{{ scope.row.withdrawAuthLimit || 0 }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="手续费" width="120">
                        <template #default="scope">

                            <dicItemsETag dataType="Int" dicCode="accountWithdrawChargeType"
                                :value="scope.row.withdrawChargeType" :key="scope.row.withdrawChargeType"
                                :type="scope.row.withdrawChargeType === 10 ? 'success' : 'warning'" />

                            <div v-if="scope.row.withdrawChargeType == 10">
                                {{ scope.row.withdrawCharge * 100 || 0 }}%
                            </div>

                            <div v-if="scope.row.withdrawChargeType == 20">
                                {{ scope.row.withdrawCharge || 0 }}{{ scope.row.coinSymbol }}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="创建者">
                        <template #default="scope">
                            <span>{{ scope.row.createdBy }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="创建时间" width="160" prop="create_Date">
                        <template #default="scope">
                            <span>{{ formatDate2(scope.row.createdDate) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="更新时间" width="160" prop="update_Date">
                        <template #default="scope">
                            <span>{{ formatDate2(scope.row.updatedDate) }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="转账状态">
                        <template #default="scope">
                            <el-tag v-if="scope.row.transferStatus == 10" effect="dark" type="success">启用</el-tag>
                            <el-tag v-if="scope.row.transferStatus != 10" effect="dark" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="启用状态">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 10" effect="dark" type="success">可用</el-tag>
                            <el-tag v-if="scope.row.status == 20" effect="dark" type="success">仅充值</el-tag>
                            <el-tag v-if="scope.row.status == 30" effect="dark" type="success">仅提现</el-tag>
                            <el-tag v-if="scope.row.status == 99" effect="dark" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作" fixed="left">
                        <template #default="scope">
                            <div>
                                <el-button size="small" type="primary"
                                    @click.native.prevent="editItem(scope.row)">编辑</el-button>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
            </el-card>
        </el-card>


        <editDialog ref="editDialogRef" @refresh="refresh"></editDialog>
    </div>
</template>

<script setup lang="ts" name="systemMenu">
import { formatDate } from '/@/utils/formatTime';
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const dicItemsETag = defineAsyncComponent(() => import('/@/components/dic/dicItemsETag.vue'));

import { useFundApi } from '/@/api/fund/index'

// 引入组件
const editDialog = defineAsyncComponent(() => import('./dialog.vue'));
const editDialogRef = ref();

const state = reactive({
    page: 1,
    limit: 20,
    total: 0,
    dataList: [] as any,
    ruleForm: {},
});


const editItem = (row: any) => {
    editDialogRef.value.openDialog('edit', row);
}


const addItem = () => {
    editDialogRef.value.openDialog('add');
}

const refresh = () => {
    getcoinList();
}




const formatDate2 = (str: any) => {
    if (!str) return "-";
    return formatDate(new Date(str), "YYYY-mm-dd HH:MM")
}




const getcoinList = async () => {
    let tempList = await useFundApi().getcoinList();
    state.dataList = tempList;
}



// 页面加载时
onMounted(() => {
    getcoinList();
});





</script>



<style scoped lang="scss">
.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.system-offer-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}


.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>

